<template>
	<div class="vue_app mycoupons" style="position: relative;width: 100%;height: 100%;padding-top: 5.2rem;">
		<div style="position: absolute;width: 100%;top: 0;">
			<my-header :title="'我的优惠券'" :hasTitle="true" :hasBack="true"></my-header>
			<!--头部-->
			<tab-head :titleInfor="titleInfor" v-if="titleInfor">
			</tab-head>
		</div>
		<div style="width: 100%;height:100%; ">
			<translate-main :lengths="3" ref="translateMain">
				<div style="width: 100%;height:100%;">
					<ul class="coupon_list" v-if="activeIndex==0">
						<li v-if="mycouponsdata2" v-for="(val,index) in mycouponsdata2" :key="index" style="text-align: left;">
							<div class="account_money">
								<div class="moneyclss">
									<span class="unit" v-if="val.couponDto.couponAmount">¥</span>
									<span>{{pricetwo(1,val.couponDto.couponAmount,val.couponDto.couponDiscount)}}</span><span class="unit" v-if="val.couponDto.couponAmount">{{pricetwo(2,val.couponDto.couponAmount,val.couponDto.couponDiscount)}}</span>
									<span class="unit" v-if="val.couponDto.couponDiscount">折</span>
								</div>
								<p class="stateclss">可用</p>
							</div>
							<dl>
								<dt>
									<span class="usePlatspan" :class="useplatcolor(val.couponDto.usePlatform)">{{useterrace(val.couponDto.usePlatform)}}</span> 
									{{val.couponDto.couponName}}
								</dt>
								<dd>{{useRangefn(val)}}</dd>
								<dd v-if="val.couponDto.useRestriction==1">满{{val.couponDto.fullElement}}元使用</dd>
								<p>有效期：{{val.availableStartTime}}-{{val.availableEndTime}}</p>	
							</dl>
						</li>
						<div class="no_data" v-if="mycouponsdata2.length==0 && flag1">
							<img src="static/image/no-yh.png" style="width:70%;" />
							<p>暂无优惠券数据</p>
							<router-link class="back_home aui-btn aui-btn-outlined" tag="div" :to="{path:'home'}">逛逛首页</router-link>
						</div>
					</ul>
					<ul class="coupon_list" v-if="activeIndex==1">
						<li class="use" v-if="mycouponsdata3" v-for="(val,index) in mycouponsdata3" :key="index" style="text-align: left;">
							<div class="account_money">
								<div class="moneyclss">
									<span class="unit" v-if="val.couponDto.couponAmount">¥</span>
									<span>{{pricetwo(1,val.couponDto.couponAmount,val.couponDto.couponDiscount)}}</span><span class="unit" v-if="val.couponDto.couponAmount">{{pricetwo(2,val.couponDto.couponAmount,val.couponDto.couponDiscount)}}</span>
									<span class="unit" v-if="val.couponDto.couponDiscount">折</span>
								</div>
								<p class="stateclss">已用</p>
							</div>
							<dl>
								<dt>
									<span class="usePlatspan" :class="useplatcolor(val.couponDto.usePlatform)">{{useterrace(val.couponDto.usePlatform)}}</span> 
									{{val.couponDto.couponName}}
								</dt>
								<dd>{{useRangefn(val)}}</dd>
								<dd v-if="val.couponDto.useRestriction==1">满{{val.couponDto.fullElement}}元使用</dd>
								<p>使用时间：{{val.useTime}}</p>
							</dl>
						</li>
						<div class="no_data" v-if="mycouponsdata3.length==0 && flag2">
							<img src="static/image/no-yh.png" style="width:70%;" />
							<p>暂无优惠券数据</p>
							<router-link class="back_home aui-btn aui-btn-outlined" tag="div" :to="{path:'home'}">逛逛首页</router-link>
						</div>
					</ul>
					<ul class="coupon_list" v-if="activeIndex==2">
						<li class="already2" v-if="mycouponsdata5" v-for="(val,index) in mycouponsdata5" :key="index" style="text-align: left;">
							<div class="account_money">
								<div class="moneyclss">
									<span class="unit" v-if="val.couponDto.couponAmount">¥</span>
									<span>{{pricetwo(1,val.couponDto.couponAmount,val.couponDto.couponDiscount)}}</span><span class="unit" v-if="val.couponDto.couponAmount">{{pricetwo(2,val.couponDto.couponAmount,val.couponDto.couponDiscount)}}</span>
									<span class="unit" v-if="val.couponDto.couponDiscount">折</span>
								</div>
								<p class="stateclss">过期</p>
							</div>
							<dl>
								<dt>
									<span class="usePlatspan" :class="useplatcolor(val.couponDto.usePlatform)">{{useterrace(val.couponDto.usePlatform)}}</span> 
									{{val.couponDto.couponName}}
								</dt>
								<dd>{{useRangefn(val)}}</dd>
								<dd v-if="val.couponDto.useRestriction==1">满{{val.couponDto.fullElement}}元使用</dd>
								<p>过期时间：{{val.availableEndTime}}</p>
							</dl>
						</li>
						<div class="no_data" v-if="mycouponsdata5.length==0 && flag3">
							<img src="static/image/no-yh.png" style="width:70%;" />
							<p>暂无优惠券数据</p>
							<router-link class="back_home aui-btn aui-btn-outlined" tag="div" :to="{path:'home'}">逛逛首页</router-link>
						</div>
					</ul>
				</div>
			</translate-main>
		</div>
	</div>
</template>

<script>
	import MyHeader from "../header";
	import axios from "axios";
	import TabHead from '../../real-components/TabHeadOrder';
	import TranslateMain from '../../real-components/TranslateTest';
	import { showLoading, hideLoading } from "@/utils/loading";
	export default {
		data() {
			return {
				titleInfor: [{
					goodsClassId: "",
					goodsClassName: "未使用"
				}, {
					goodsClassId: "",
					goodsClassName: "已使用"
				}, {
					goodsClassId: "",
					goodsClassName: "已过期"
				}],
				mycouponsdata2: [],
				mycouponsdata3: [],
				mycouponsdata5: [],
				onedata:[],
				twodata:[],
				flag1:false,
				flag2:false,
				flag3:false,
			}
		},
		components: {
			"my-header": MyHeader,
			"tab-head": TabHead,
			"translate-main": TranslateMain
		},
		methods: {
			//截取使用时间
			getuseTime(val){
				if(val){
					return val.substring(0,16);
				}else{
					return '--'
				}
			},
			//价格小数点后两位
			pricetwo(num, amount, discount) {
				if(num == 1 && discount) {
					return discount
				} else if(num == 1 && amount) {
					return String(amount).split('.')[0];

				} else if(num == 2 && amount) {
					if(String(amount).split('.')[1]) {
						return "." + String(amount).split('.')[1];
					} else {
						return ""
					}

				}
			},
			//优惠券使用范围
			useRangefn(item) {
				if(item.couponDto.useRange == 1) {
					if(item.couponDto.preferentialRange.promotionGoodsList.length == 1) {
						return item.couponDto.preferentialRange.promotionGoodsList[0].goodsName + "卡券"
					} else {
						return "商品类卡券"
					}
				} else if(item.couponDto.useRange == 2 || item.couponDto.useRange == 5) {
					if(item.couponDto.preferentialRange.promotionClassList.length == 1) {
						return item.couponDto.preferentialRange.promotionClassList[0].className + "卡券"
					} else {
						return "品类卡券"
					}
				} else if(item.couponDto.useRange == 3) {
					if(item.couponDto.preferentialRange.promotionBrandList.length == 1) {
						return item.couponDto.preferentialRange.promotionBrandList[0].brandName + "卡券"
					} else {
						return "品牌类卡券"
					}
				} else if(item.couponDto.useRange == 4) {
					return "全场卡券"
				}
			},
			//使用平台的获取
			useterrace(item) {
				var arr = item.split(',')
				if(arr.indexOf('wap')>-1 && arr.indexOf('offline')<0){
					return '商城用'
				}else if(arr.indexOf('offline')>-1 && arr.indexOf('wap')<0){
					return '体验中心用'
				}else if(arr.indexOf('wap')>-1 && arr.indexOf('offline')>-1){
					return '商城体验中心通用'
				}
			},
			useplatcolor(item){
				var arr = item.split(',')
				if(arr.indexOf('wap')>-1 && arr.indexOf('offline')<0){
					return 'usePlatspan1'
				}else if(arr.indexOf('offline')>-1 && arr.indexOf('wap')<0){
					return 'usePlatspan2'
				}else if(arr.indexOf('wap')>-1 && arr.indexOf('offline')>-1){
					return 'usePlatspan3'
				}
			},
			querymyCoupons2() {
				showLoading()
				var sessionId = localStorage.getItem('sessionId');
				let config2 = {
					url: window.api.trade_host + '/marketCenter/getCouponCodeListByUserId?status=2',
					method: 'GET',
					headers: {
						'sessionId': sessionId,
					},
				};
				axios(config2).then((res) => {
					hideLoading()
					this.flag1 = true
					this.mycouponsdata2 = res.data.data
				})
			},
			querymyCoupons3() {
				showLoading()
				var sessionId = localStorage.getItem('sessionId');
				let config3 = {
					url: window.api.trade_host + '/marketCenter/getCouponCodeListByUserId?status=3',
					method: 'GET',
					headers: {
						'sessionId': sessionId,
					},
				};
				axios(config3).then((res) => {
					hideLoading()
					this.flag2 = true
					this.mycouponsdata3 = res.data.data
				})
			},
			querymyCoupons5() {
				showLoading()
				var sessionId = localStorage.getItem('sessionId');
				let config5 = {
					url: window.api.trade_host + '/marketCenter/getCouponCodeListByUserId?status=5',
					method: 'GET',
					headers: {
						'sessionId': sessionId,
					},
				};
				axios(config5).then((res) => {
					hideLoading()
					this.flag3 = true
					this.mycouponsdata5 = res.data.data
				})
			},
			refresh() {
				this.$refs.translateMain.refresh()
			}
		},
		computed: {
			activeIndex() {
				return this.$store.state.cjy.classifyIndex
			},
		},
		created() {
			this.$store.dispatch('cjy/changeClassifyIndex', 0)
		},
		watch: {
			activeIndex(newdata, olddata) {
				if(newdata == '0'){
				}else if(newdata == '1'){
					this.onedata.push(newdata)
					if(this.onedata.length==1){
						this.querymyCoupons3()
					}
				}else if(newdata == '2'){
					this.twodata.push(newdata)
					if(this.twodata.length==1){
						this.querymyCoupons5()
					}
				}
			},
		},
		mounted() {
			this.querymyCoupons2()
		},
	}
</script>

<style>
	.mycoupons .coupon_list li {
		background: url(../../../static/image/coupon_bj_leftRed.png) no-repeat left -1rem;
		background-color: #fff;
		background-size: 19%;
	}
	
	.mycoupons .coupon_list li dl {
		text-align: left;
		white-space: normal;
	}
	.mycoupons .coupon_list li dl dt {
		font-weight: normal !important;
		padding-right: 0.2rem;
		font-size: 0.7rem;
		margin-top: 0.2rem;
		line-height: normal;
		margin-bottom:5px;
	}
	.mycoupons .coupon_list li dl p {
		font-size: 0.57rem;
		white-space:nowrap;
		line-height: 0.6rem;
		height: 0.6rem;
		margin-bottom: 0.2rem;
	}
	
	.mycoupons .coupon_list li dl dd {
		font-size: 0.5rem;
		padding: 0.1rem 0.2rem;
		border: 1px solid #d7d7d7;
		color: #666;
		max-width: 11rem;
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		height: 20px;
		line-height: 16px
	}
	
	.mycoupons .coupon_list li::after,
	.mycoupons .coupon_list li::before {
		left: 4.5rem;
	}
	
	.mycoupons .coupon_list li .account_money .unit {
		font-size: 0.8rem;
	}
	
	.mycoupons .coupon_list li .account_money {
		width: 5rem;
	}
	
	.mycoupons .coupon_list li .account_money .moneyclss {
	}
	
	.mycoupons .coupon_list li .account_money .stateclss {
		position: absolute;
		left: -0.1rem;
		top: -0.8rem;
		-webkit-transform: rotateZ(-45deg);
		transform: rotateZ(-45deg);
		color: #ffffff;
	}
	
	.mycoupons .coupon_list li .account_money span {
		font-size: 1.4rem;
		display: inline-block;
	}
	
	.mycoupons .coupon_list li.use {
		opacity: 0.5;
	}
	
	.mycoupons .coupon_list li.already2 {
		background: url(../../../static/image/coupon_bj_left.png) no-repeat left -1rem;
		background-color: #fff;
		background-size: 19%;
		opacity: 0.5;
	}
	
	.mycoupons .coupon_list li.already2 .account_money {
		color: #a0a0a0;
	}
	
	.mycoupons .coupon_list li.use .account_money {
		color: #a0a0a0;
	}
	
	.mycoupons .coupon_list li.already2 dd {
		color: #a0a0a0;
		border: 1px solid #a0a0a0;
	}
	
	.mycoupons .coupon_list li.use dd {
		color: #a0a0a0;
		border: 1px solid #a0a0a0;
	}
	.mycoupons .usePlatspan{
		display: inline-block;
		font-size: 0.6rem;
		line-height: 1rem;
		padding:0rem 0.25rem;
		border-radius: 0.5rem;
	}
	.mycoupons .coupon_list li::after, .mycoupons .coupon_list li::before{
		background-color:#f5f5f5;
	}
	.usePlatspan1{
		color: #38B035;
		background-color:rgba(56,176,53,0.1);/*商城用*/
	}
	.usePlatspan2{
		color: #FFCC00;
		background-color: rgba(255,204,0,0.1);/*体验中心用*/
	}
	.usePlatspan3{
		color: #FF6600;
		background-color: rgba(255,102,0,0.1);/*商城体验中心通用*/
	}

</style>